/*
 * @Author: yangrongxin
 * @Date: 2021-09-14 09:54:14
 * @LastEditors: guoju
 * @LastEditTime: 2022-01-07 11:27:46
 */
import { useState, useReducer, useEffect } from 'react';
import { AtIcon, AtInput } from 'taro-ui';
import { View, Text, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import PickerWapper from '@/components/PickerWapper';
import PickerWapperEmpty from '@/components/PickerWapper/empty';
import { marriage as marriageList, education as educationList } from '@/pages/My/compoents/MyData/dataDictionary';
import { queryUserDetail, updateBaseUserInfo } from '@/pages/My/compoents/MyData/service';
import { isLoginFn } from '@/utils/common';
import styles from './index.module.less';

function reducer(state, action) {
  if (action.type === 'update') {
    return {
      ...state,
      ...action.payload,
    };
  }
}

const UserDataComfirm = (props: any) => {
  const { onClose, isOpened: propsIsOpened, toPayFn } = props;

  const isLogin = isLoginFn();

  const [state, dispatch] = useReducer(reducer, {
    isOpened: false, // 控制当前是不是展示的状态
    title: '', // 展示标题的名称
    rangeList: [], // 控制当前展示的内容
    modalName: '', // 当前控制的字段信息
  });

  const [userInfo, setUserInfo] = useState<any>({});

  // 更新当前state中的数据
  const changeModalInfo = (payload) => {
    dispatch({
      type: 'update',
      payload,
    });
  };

  useEffect(() => {
    if (isLogin && propsIsOpened)
      queryUserDetail().then((res: any) => {
        if (res) {
          const { marriage, education, ...otherUserData } = res;
          setUserInfo({
            ...otherUserData,
            marriage,
            education,
            marriageStr: marriageList[marriage],
            educationStr: educationList[education],
          });
        }
      });
  }, [propsIsOpened]);

  const { title, isOpened, rangeList, modalName } = state;

  const {
    name,
    idCard,
    marriageStr,
    educationStr,
    marriage,
    education,
    age,
    gender, // 1 男 2 女
  } = userInfo;

  const submitData = () => {
    if (typeof marriage !== 'number') {
      Taro.showToast({
        title: '婚姻状况必填！',
        icon: 'none',
      });
      return;
    }
    if (typeof education !== 'number') {
      Taro.showToast({
        title: '学历必填！',
        icon: 'none',
      });
      return;
    }
    updateBaseUserInfo({
      marriage,
      education,
    }).then((res: any) => {
      if (res) {
        Taro.showToast({
          title: '消息确认成功!',
          icon: 'none',
        });
        toPayFn && toPayFn();
        onClose && onClose();
      }
    });
  };

  return (
    <View>
      {/* 展示确认信息的弹窗 */}
      <PickerWapperEmpty
        hidePaddingBottom
        extendsContainerWapper={styles.extendsPickerWapper}
        isOpened={propsIsOpened}
        onClose={onClose}
      >
        {/* 展示编辑的头部 */}
        <View className={styles.header}>
          <Text>请确认与完善以下资料</Text>
        </View>
        {/* 展示基本信息 */}
        <View className={styles.showDataPanel}>
          <Text>姓名</Text>
          <Text>{name}</Text>
          <Text style={{ marginLeft: '32px' }}>年龄</Text>
          <Text style={{ marginRight: '32px' }}>{age}岁</Text>
          <Text>性别</Text>
          <Text>{gender === 1 ? '男' : '女'}</Text>
        </View>
        <View className={styles.showDataPanel}>
          <Text>身份证</Text>
          <Text>{idCard}</Text>
        </View>
        {/* 选择框 */}
        <View className={styles.formContent}>
          <AtInput
            className={styles.extendIconClass}
            name="marriageStr"
            title="婚姻"
            value={marriageStr}
            placeholder="请选择"
            placeholderClass={styles.inputPlaceholder}
            type="text"
            onChange={() => undefined}
            editable={false}
            onClick={() => {
              changeModalInfo({
                // isOpened: true,
                rangeList: marriageList,
                title: '请选择您的婚姻状况',
                modalName: 'marriage',
              });
              setTimeout(() => {
                changeModalInfo({
                  isOpened: true,
                });
              }, 200);
            }}
          >
            <AtIcon value="chevron-right" color={marriageStr ? '#333' : '#b8b8b8'} />
          </AtInput>
          <AtInput
            className={styles.extendIconClass}
            name="educationStr"
            title="学历"
            value={educationStr}
            placeholder="请选择"
            placeholderClass={styles.inputPlaceholder}
            type="text"
            onChange={() => undefined}
            editable={false}
            onClick={() => {
              changeModalInfo({
                // isOpened: true,
                rangeList: educationList,
                title: '请选择您的教育状况',
                modalName: 'education',
              });
              setTimeout(() => {
                changeModalInfo({
                  isOpened: true,
                });
              }, 200);
            }}
          >
            <AtIcon value="chevron-right" color={educationStr ? '#333' : '#b8b8b8'} />
          </AtInput>
        </View>
        {/* 展示提交按钮 */}
        <Button className={styles.submitBtn} onClick={submitData}>
          提交
        </Button>
      </PickerWapperEmpty>
      {/* 存放当前展示的弹窗 */}
      <PickerWapper
        title={title}
        isOpened={isOpened}
        rangeList={rangeList}
        indexValue={userInfo[modalName]}
        onClose={() => changeModalInfo({ isOpened: false })}
        onChange={(val: string, valIndex: number) => {
          setUserInfo({ ...userInfo, [modalName]: valIndex, [`${modalName}Str`]: val });
          changeModalInfo({ isOpened: false });
        }}
      />
    </View>
  );
};

export default UserDataComfirm;
